<!--
 * @Description  : 封装 公共组件 表格
 * @Author       : 袁振 🎈
 * @EditTime     : 2023-11-16
 * @Copyright    ：2023 by yuanzhen, All Rights Reserved.
-->

<template>
  <div class="table-container">
    <!-- 头部 -->
    <header>
      <p class="title">{{ tableConfigs.title }}</p>
      <el-select
        v-model="sizeFlag"
        class="m-2"
        placeholder="请选择预览尺寸"
        size="small"
      >
        <el-option
          v-for="item in options"
          :key="item"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
    </header>
    <!-- 列表 -->
    <el-table
      border
      :size="tableSize"
      :data="tableConfigs.data"
      style="width: 100%; height: 100%"
    >
      <template v-if="tableConfigs.columns">
        <el-table-column
          type="index"
          prop=""
          label="序号"
          fixed="left"
          align="center"
          width="80"
        />
        <el-table-column
          v-for="(item, index) in tableConfigs.columns"
          :key="index"
          :prop="item.prop"
          :label="item.label"
          :fixed="item.fixed ? item.fixed : false"
          :sortable="item.sortable ? item.sortable : false"
          :align="item.align ? item.align : 'center'"
          :width="item.width + 'px'"
        >
          <template v-if="item.components" #default="scope">
            <slot :name="item.prop" v-bind="scope"></slot>
          </template>
        </el-table-column>
      </template>
    </el-table>
    <!-- 分页 -->
    <div class="pagination-container">
      <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[10, 20, 30, 40]"
        :small="true"
        :background="true"
        layout="total, sizes, prev, pager, next, jumper"
        :total="tableConfigs.total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, defineProps, defineEmits, watch } from "vue";

// 接收 配置数据
const props = defineProps({
  tableConfigs: {
    type: Object,
    default: () => ({}),
  },
});

// 列表尺寸 切换
const sizeFlag = ref("1");
const tableSize = ref("default");
const options = [
  {
    label: "偏大尺寸",
    value: "2",
  },
  {
    label: "默认尺寸",
    value: "1",
  },
  {
    label: "偏小尺寸",
    value: "0",
  },
];
watch(
  () => sizeFlag,
  (nv, _ov) => {
    if (nv.value === "0") {
      tableSize.value = "small";
    } else if (nv.value === "1") {
      tableSize.value = "default";
    } else {
      tableSize.value = "large";
    }
  },
  {
    immediate: false,
    deep: true,
  }
);

// 分页功能
const currentPage = ref(1);
const pageSize = ref(10);
const emit = defineEmits(["handleGetParams"]);
const handleSizeChange = (val: number) => {
  pageSize.value = val;
  emit("handleGetParams", { pageSize, currentPage });
};
const handleCurrentChange = (val: number) => {
  currentPage.value = val;
  emit("handleGetParams", { pageSize, currentPage });
};


</script>

<style lang="scss" scoped>
.table-container {
  width: 100%;
  height: 100%;

  header {
    padding: 10px;
    border: 1px solid #e9e8e8;
    border-bottom: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .title {
      font-size: 16px;
      font-weight: 600;
      font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
    }
  }

  .pagination-container {
    padding: 10px;
    display: flex;
    justify-content: flex-end;
    border: 1px solid #e9e8e8;
    border-top: none;
    .el-pagination {
      width: fit-content;
      // margin-right: 0px;
    }
  }
}
</style>